import {
  View,
  Image,
  TouchableOpacity,
  Text,
  StyleSheet,
  ImageBackground,
} from 'react-native';
import {useContext} from 'react';
import {ThemeContext} from '../../../components/ThemeContextProvider';
import bg_check_card from '../../../assets/img/bg_check_card.png'
import check_card_icon from '../../../assets/img/check_card_icon.png'
export default function CheckCard({outShowHandle, create_time, end_time, qty, user_info={}, goods_info={}, id}) {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    card: {
      width: 240,
      height: 120,
      padding: 10,
    },
    info: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    infoLeft: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    goodsImg: {
      width: 44,
      height: 44,
      borderRadius: 22,
      marginRight: 4
    },
    goodsName: {
      fontSize: 14,
      color: theme.fontColor,
    },
    phone: {
      fontSize: 12,
      color: theme.fontColor,
    },
    number: {
      color: theme.fontColor,
      fontSize: 20,
      fontWeight: '700',
    },
    bottom: {
      marginTop: 18,
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    dateText: {
      fontSize: 10,
      color: theme.font3Color,
    },
    outBtn: {
      width: 64,
      height: 28,
      borderRadius: 8,
      backgroundColor: theme.primaryColor,
      justifyContent: 'center',
      alignItems: 'center',
    },
    btnText: {
      fontSize: 12,
      color: theme.themeColor,
    },
  });
  return (
    <ImageBackground
      source={bg_check_card}
      style={styles.card}>
      <View style={styles.info}>
        <View style={styles.infoLeft}>
          <Image
            source={!goods_info.cover ? check_card_icon :{
              uri: goods_info.cover,
            }}
            style={styles.goodsImg}></Image>
          <View>
            <Text style={styles.goodsName}>{goods_info.name}</Text>
            <Text style={styles.phone}> {user_info.phone} </Text>
          </View>
        </View>
        <Text style={styles.number}>X{qty}</Text>
      </View>
      <View style={styles.bottom}>
        <View>
          <Text style={styles.dateText}>存入 {create_time}</Text>
          <Text style={styles.dateText}>到期 {end_time}</Text>
        </View>
        <TouchableOpacity activeOpacity={0.7} style={styles.outBtn} onPress={()=>{
          outShowHandle()
        }}>
          <Text style={styles.btnText}>取出</Text>
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );
}
